{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爬取全国的天气</title>
    <!-- 导入样式文件 -->
    <link rel="stylesheet" href="{% static 'plugin/layui/css/layui.css' %}">
</head>
<body>
<!-- 内容01：面包屑导航 -->
<span class="layui-breadcrumb">
  <a href="#">首页</a>
  <a href="#">爬虫</a>
  <a><b>爬取全国天气</b></a>
</span>

<!-- 内容02：爬取天气的按钮 -->
<div>
    <button type="button" id="btnStart" class="layui-btn" style="margin: 20px 0 0 0">爬取天气</button>
</div>

<!-- 内容03：表格  -->
<table id="tableArea" class="layui-hide"></table>

</body>
</html>
<!-- ============ 引入JS文件部分================== -->
<!-- 引入jQuery 操作文件 -->
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<!-- 引入layui.js文件 -->
<script src="{% static 'plugin/layui/layui.js' %}"></script>

<script>
    // 入口函数
    $(function () {
        // 初始化面包屑导航
        initBreadcrumb();
        // 初始化表格
        initTable();
        // 响应爬取天气按钮点击事件
        startSpider();

    });

    // ========= 实现面包屑导航 ======
    function initBreadcrumb() {
        layui.use('element', function () {
            var element = layui.element;
        });
    }

    // ========== 初始化表格=============
    function initTable() {
        // 调用layui的table组件
        layui.use('table', function () {
            // 实例一个表格模块
            let table = layui.table;

            // 展示表格
            table.render({
                elem: '#tableArea'
                , url: '{% url 'spider_weather_log' %}' // 去那里拿数据来填充表格
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {type: 'numbers', width: 80, title: '编号', align: 'center'}
                    , {field: 'date', width: 180, title: '日期', align: 'center',}
                    , {
                        field: 'status', width: 180, title: '爬取状态', align: 'center', sort: true,

                    }
                    , {field: 'spider', width: 180, title: '爬取记录', align: 'center'}
                    , {field: 'update', width: 180, title: '修改行数', align: 'center'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'insert', title: '添加行数', sort: true, align: 'center'}
                ]]
                , done: function (res, curr, count) { //表格加载完成后的回调函数
                    $('thead tr').css({'background-color': '#009688', 'color': 'white'});

                }
            });
        })

    }

    // ========== 开始爬取天气===========
    function startSpider() {
        //=== 按钮点击 ==
        $('#btnStart').on('click', function () {
            // 使用Layui 弹出层
            layui.use('layer', function () {
                //实例化一个弹出层
                let layer = layui.layer;
                // 定义一个全局loading .
                let loading = "";

                // 弹出层：在爬取数据的时候展示，如果爬取完成后，返回结果，loading就消失
                // Ajax异步请求
                $.ajax({
                    url: "{% url 'start_spider_weather' %}", // 后台调用爬虫的接口
                    method: 'GET',
                    dataType: 'JSON',
                    beforeSend: function () {
                        // 请求开始。。。（展示loading ）
                        loading = layer.msg("数据正在爬取中...", {
                            icon: 16,
                            shade: [0.7, '#000'],
                            time:false, // 取消自动关闭
                        })
                    },
                    complete: function () {
                        // 请求结束.... (隐藏loading)
                        layer.close(loading)
                    },
                    success: function (res) {
                        // 请求成功后数据返回！！！
                        if (res.status){
                            // 重新加载当前页面
                            location.href = "{% url 'spider_weather' %}";
                        } else {
                            alert("爬取天气失败！！");
                        }
                    }
                });


            })
        })
    }

</script>
